@import "../../libs/weui.css";
@import "../../libs/base";
@import "../../libs/tabs";
@import "../../libs/swiper.min.css";

a {
  text-decoration: none;
}

.modal-alert {
  display: none;
}

@margin-left: 15px;
@header-height: 40px;
header {
  position: relative;
  width: 100%;
  height: @header-height;
  background: #0092D7;

  .logo {
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;

    .title {
      margin-left: -60px;
      color: #fff;
      font: normal normal normal 16px/@header-height 'microsoft yahei';
    }

    a {
      float: left;
      margin: 0 @margin-left;
      color: #fff;
      font: normal normal normal 16px/@header-height 'microsoft yahei';
      text-decoration: none;
    }
  }
}

.fly-top {
  position: fixed;
  bottom: 30px;
  right: 10px;
  display: none;

  a {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 16px; 
    background: #fff url(imgs/up.png) no-repeat center center;
  }
}

@margin-left: 15px;
.container {
  position: relative;
  width: 100%;
  overflow: hidden;

  @main-title-height: 40px;
  .main-title {
    width: 100%;
    min-height: @main-title-height;
    overflow: hidden;
    font: normal normal bold 15px/@main-title-height 'microsoft yahei';
    span {
      float: left;
      margin-left: @margin-left;
      color: #333;
      display: block;
      max-width: 70%;
    }
    a {
      font: normal normal normal 14px/@main-title-height 'microsoft yahei';
      float: right;
      color: #387FC8;
      margin-right: @margin-left; 
      display: none;
    }
    .sale-state {
      font: normal normal bold 14px/@main-title-height 'microsoft yahei';
      float: right;
      color: #F09C47;     
      margin-right: @margin-left; 
      display: none;
    }
  }

  .imgdetail {
    width: 100%;
    min-height: 160px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    img {
      max-width: 100%;
      width: 100%;
    }
  }

  .guide-price {
    width: 100%;
    min-height: 45px;
    border-bottom: 1px solid #ccc;
    margin: 10px 0 0;
    overflow: hidden;
    .w-rest-160 {
      float: left;
    }
    .w-160 {
      float: left;
      margin: 0 15px;
    }
    span {
      font: normal normal normal 14px/35px 'microsoft yahei';
      &.lbl {
        color: #999;
      }
    }    
    .btn-blue {
      background-color: #337ab7;
      font: normal normal normal 15px/32px 'microsoft yahei';
      border-radius: 0;
    }
  }
  
  .param {
    width: 100%;
    min-height: 170px;
    height: auto;
    overflow: hidden;
    padding: 0 0 20px 0;
    display: none;

    .moto-title {
      margin: 8px @margin-left;
      font: normal normal 700 15px/22px 'microsoft yahei';
      color: #387FC8;
    }

    .row {
      margin: 8px @margin-left 0;
    }
    span {
      font: normal normal normal 14px/22px 'microsoft yahei';
      &.lbl {
        color: #999;
      }
    }

    /*a {
      color: #333;
      font: normal normal normal 15px/32px 'microsoft yahei';
      border-radius: 0;
      border: 1px solid #999;

      &:visited {
        color: #333;
      }
      &:after {
        border-radius: 0;
      }
    }*/

    .tab {
      @title-height: 35px;
      .title {
        margin: 10px @margin-left;
        border-top: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        height: @title-height;
        background: #ddd;  

        li {
          width: 100px;
          height: @title-height;
          float: left;
          font: normal normal normal 15px/@title-height 'microsoft yahei';
          text-align: center;

          &.action {
            background: #fff;
            height: @title-height + 2px;
          }
        }
      }

      .tab-content {
        &.tab-price {
          display: block;
        }
        &.tab-level {
          display: none;
        }

        ul {
          li {
            width: 50%;
            float: left;
            margin: 20px 0 0;

            &:nth-child(odd) {
              >div {
                padding: 5px 10px 0;
              }
            }
            &:nth-child(even) {
              >div {
                padding: 5px 10px 0 0;
              }
            }

            > div {
              height: 180px;
              margin: 0 auto;

              img {
                width: 100%;
                height: 80px;
                border: 1px solid #ddd;
              }

              .mname {
                color: #387FC8;
                margin: 5px 0;
                font: normal normal bold 14px/22px 'microsoft yahei';
              }
              .mprice {
                color: #ff6666;
                font: normal normal bold 13px/22px 'microsoft yahei';
              }
              .minfo {
                color: #666;
                font: normal normal normal 12px/22px 'microsoft yahei';
              }
            }
          }
        }
      }
    }
  }
}
.weui_btn_default:not(.weui_btn_disabled):visited {
  color: #333;  
}
.lbl {
  color: #999;
}

footer {
  position: relative;
}
.container-bigimg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  display: none;
  z-index: 2;
  
  .head {
    position: relative;
    width: 100%;
    height: 40px;
    font: normal normal normal 14px/40px 'microsoft yahei';

    .return {
      position: absolute;
      left: 15px;
      top: 0;
      color: #fff;
    }

    .img-count {
      position: relative;
      left: 50%;
      margin-left: -10px;
    }
  }

  .bigimg {
    position: relative;
    width: 100%;
    margin: 0;
    
    .moto-name {   
      position: absolute;   
      left: 0;
      top: 50%;
      width: 100%;
      height: 40px;   
      margin-top: -@img-height*0.75-40;
      font: normal normal normal 14px/40px 'microsoft yahei'; 
      text-align: center;
    }

    @img-height: 270px; 
    .img {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%; 
      height: @img-height;
      margin-top: -@img-height*0.5;
      text-align: center;
      
      img {
        max-width: 100%;        
        max-height: 260px;
        margin: 0 auto;
      }
      .hint {
        display: block;
        width: 100%;
        text-align: center;
        font: normal normal normal 12px/22px 'microsoft yahei';
        color: #bebebe;
      }
    }
  }
}


.carousel-caption {
  bottom: 0;
  padding-bottom: 0;
  color: #bebebe;
}

.carousel {
  height: 100%;
}
.carousel-inner {
  height: 100%;  
}
.carousel-inner .item {
  height: 100%;  
}

.swiper-wrapper {
  li {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;

    img {
      vertical-align: middle;
    }
  }
}